<template>
	<view class="infoList">
		<view class="btn-group fboxRow Ycenter" v-if="detail.cardId != userInfo.memberId">
			<!--  #ifdef  H5 -->
			<view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard">分享名片</view>
			<!--  #endif -->
			<!--  #ifdef  MP -->
			<button class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" open-type="share" hover-class="none">分享名片</button>
			<!--  #endif -->
			<view
				class="btn btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12"
				@tap="goChange('2')"
				v-if="detail.cardId != userInfo.memberId && detail.isFriend"
			>
				发消息
			</view>
			<view
				v-else-if="detail.cardId && detail.cardId != userInfo.memberId"
				class="btn btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12"
				@tap="goChange(1)"
			>
				申请交换名片
			</view>
		</view>
		<view class="btn-group fboxRow Ycenter" v-else>
			<!--  #ifdef  H5 -->
			<view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard" hover-class="none">递名片</view>
			<!--  #endif -->
			<!--  #ifdef  MP -->
			<button class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" open-type="share" hover-class="none">递名片</button>
			<!--  #endif -->
			<!-- <view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard">递名片</view> -->
			<view class="btn font30 btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12" @tap="goPage('qrcode')">名片码</view>
		</view>
		<view class="btn-scroll">
			<view class="scroll-wrap">
				<scroll-view scroll-x="true" @touchmove.stop>
					<view class="fboxRow Ycenter">
						<view class="btn fboxCol border-radius12" v-if="detail.mobile && detail.mobile != '不可见(需双方交换名片)'" @tap="goPage('phone')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-dianhua4"></text>
								拨打电话
							</view>
							<view class="con font26">{{ detail.mobile || '' }}</view>
						</view>
						<view class="btn fboxCol border-radius12" v-if="detail.email && detail.email != '不可见(需双方交换名片)'" @tap="goPage('email')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-youxiang"></text>
								复制邮箱
							</view>
							<view class="con font26">{{ detail.email || '' }}</view>
						</view>
						<view class="btn fboxCol border-radius12" v-if="detail.addressInfo && detail.addressInfo != '不可见(需双方交换名片)'" @tap="goPage('map')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-dingwei"></text>
								地址
							</view>
							<view class="con font26">{{ detail.addressInfo || '' }}</view>
						</view>
						<view class="btn fboxCol border-radius12" @tap="goPage('mydd')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-zhuye"></text>
								{{ detail.cardId != userInfo.memberId ? 'TA的主页' : '我的主页' }}
							</view>
							<view class="con font26">点击查看主页</view>
						</view>
						<view class="btn fboxCol border-radius12" v-if="detail.showResumeFlag" @tap="goVita">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-jianli"></text>
								{{ detail.cardId != userInfo.memberId ? 'TA的简历' : '我的简历' }}
							</view>
							<view class="con font26">点击查看简历</view>
						</view>
						<view class="btn fboxCol border-radius12" @tap="$pageTo('/about/guidePage')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-renmai"></text>
								{{ detail.cardId != userInfo.memberId ? 'TA的人脉' : '我的人脉' }}
							</view>
							<view class="con font26">点击查看人脉</view>
						</view>
						<view class="btn fboxCol border-radius12" @tap="follow()" v-if="detail.cardId != userInfo.memberId">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont" :class="_detail.follow ? 'bw-yiguanzhu' : 'bw-weiguanzhu'"></text>
								{{ _detail.follow ? '已关注' : '关注TA' }}
							</view>
							<view class="con font26">{{ _detail.follow ? '点击取消关注' : '点击这里关注' }}</view>
						</view>
						<view class="btn fboxCol border-radius12" v-if="detail.cardId != userInfo.memberId" @tap="$pageTo('/about/guidePage')">
							<view class="tit fboxRow Ycenter font26">
								<text class="bwfont bw-lujing3"></text>
								更多名片
							</view>
							<view class="con font26">点击查看更多</view>
						</view>
						<!-- 
						<view class="btn fboxRow Ycenter Xcenter border-radius12" @tap="follow()"
							v-if="detail.cardId != userInfo.memberId">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img13.png"
								mode="aspectFit"></image>
							{{ _detail.follow ? '已关注' : '关注TA' }}
						</view>
						<view class="btn fboxRow Ycenter Xcenter border-radius12" v-if="detail.showResumeFlag"
							@tap="goVita">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img14.png"
								mode="aspectFit"></image>
							{{ detail.cardId != userInfo.memberId ? 'TA的简历' : '查看的简历' }}
						</view>
						<view class="btn fboxRow Ycenter Xcenter border-radius12"
							v-if="detail.cardId != userInfo.memberId" @tap="$pageTo('/about/guidePage')">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img15.png"
								mode="aspectFit"></image>
							查看TA的其他名片
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { attentionAdd, attentionDel } from '@/api/mine.js';
export default {
	props: {
		detail: {
			type: Object,
			defaul: () => {
				return {};
			}
		},
		isMine: {
			type: Boolean,
			default: false
		},
		isBanner: {
			type: Boolean,
			default: true
		},
		pattern: {
			type: [String, Number],
			default: '0'
		}
	},
	data() {
		return {
			userInfo: {}
		};
	},
	computed: {
		_detail: {
			get() {
				return this.detail;
			},
			set(val) {
				this.$emit('update:detail', val);
			}
		}
	},
	mounted() {
		const bw_user_temp = getApp().getBWData(['bw_user_temp']).bw_user_temp;
		if (bw_user_temp && bw_user_temp.memberId) {
			this.userInfo = bw_user_temp;
		}
	},
	methods: {
		goPage(type) {
			if (type == 'mydd') {
				this.$pageTo('/mydd?memberId=' + this.detail.cardId);
			} else if (type == 'phone') {
				uni.makePhoneCall({ phoneNumber: this.detail.mobile });
			} else if (type == 'email') {
				uni.setClipboardData({
					data: this.detail.email,
					success: function() {
						console.log('success');
					}
				});
			} else if (type == 'qrcode') {
				this.$pageTo('/card/qrcode?memberId=' + this.detail.cardId);
			} else if (type == 'map') {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						uni.openLocation({
							latitude: this.detail.latitude,
							longitude: this.detail.longitude,
							success: function() {}
						});
					}
				});
			}
		},
		goChange(type) {
			// type 1 申请交换名片 2 发送消息
			// #ifdef H5
				this.$emit('open');
			// #endif
			// #ifdef MP
				this.$pageTo('/about/guidePage')
			// #endif
			
			
			// const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			// if (bw_params && bw_params.access_token) {
			// 	// 是否提交过交换名片
			// 	if (this.detail.exchangeStep == 0) {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '等待对方验证通过'
			// 		});
			// 		return
			// 	}
			// 	this.$pageTo('/cardChange?id=' + this.detail.cardId);
			// } else {
			// 	this.$emit('login');
			// }
		},
		goVita() {
			const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
			if (bw_params && bw_params.access_token) {
				if (bw_user_temp.memberId == this.detail.cardId) {
					this.$pageTo('/recruit/user/detail?parentPage=card&pageType=0&id=' + this.detail.resumeId);
				} else if (this.detail.organisationId) {
					this.$pageTo('/recruit/user/detail?parentPage=card&pageType=2&id=' + this.detail.resumeId + '&companyId=' + this.detail.organisationId);
				} else {
					this.$pageTo('/recruit/user/detail?parentPage=card&pageType=1&id=' + this.detail.resumeId);
				}
			} else {
				this.$emit('login');
			}
		},
		follow() {
			const { bw_params } = getApp().getBWData(['bw_params']);
			if (bw_params && bw_params.access_token) {
				if (this._detail.follow) {
					attentionDel({
						memberIdList: [this.detail.cardId]
					}).then(res => {
						this._detail.follow = false;
						this.$emit('follow', false);
					});
				} else {
					attentionAdd({
						othersId: this.detail.cardId
					}).then(res => {
						this._detail.follow = true;
						this.$emit('follow', true);
					});
				}
			} else {
				this.$emit('login');
			}
		},
		shareCard() {
			// #ifdef H5
			this.$emit('card');
			// uni.setClipboardData({
			// 	data: window.location.href+'&pattern='+this.pattern,
			// 	showToast: false,
			// 	success: function() {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '分享地址已复制，去分享给朋友吧'
			// 		});
			// 		console.log('success');
			// 	}
			// });
			// #endif
			// #ifdef MP
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					console.log(res.provider);
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								console.log(JSON.stringify(loginRes));
							}
						});
					}
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.card .hd {
	padding: 0 40rpx;
	line-height: 56rpx;
	font-weight: 700;
}

.info-wrap {
	padding: 24rpx 40rpx;
}

.info-wrap .item {
	padding: 16rpx 0;
}

.info-wrap .left {
	margin-right: 8rpx;
}

.info-wrap .center {
	line-height: 40rpx;
}

.info-wrap .icon {
	margin: 3rpx 30rpx 0 0;
	width: 37rpx;
	height: 39rpx;
}

.info-wrap .btn {
	width: 64rpx;
	height: 36rpx;
	border-radius: 4rpx;
	opacity: 1;
}

.intr-wrap {
	padding: 0 40rpx;
}

.intr-wrap .item {
	padding: 24rpx;
	border-radius: 12rpx;
}

.btn-group {
	padding: 48rpx 40rpx 0;
}
.btn-group .btn {
	height: 88rpx;
}
.btn-group .btn + .btn {
	margin-left: 22rpx;
}
.btn-share {
	border: 1px solid var(--senderViewColor);
	background: var(--pureButtonBackOneColor);
	color: var(--senderViewColor);
}

.btn-scroll {
	padding: 48rpx 40rpx 0;
}

.btn-scroll .btn {
	padding: 14rpx 18rpx;
	border: 1px solid var(--buttonOutlineTwoColor);
	white-space: nowrap;
	max-width: 344rpx;
}
.btn .tit {
	height: 38rpx;
	white-space: nowrap;
}
.btn .con {
	height: 36rpx;
	line-height: 36rpx;
	margin-top: 4rpx;
	color: var(--contentFontLightColor);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.btn-scroll .scroll-wrap .btn + .btn {
	margin-left: 12rpx;
}
.btn-scroll .bwfont {
	font-size: 28rpx;
	margin-right: 10rpx;
	background-image: linear-gradient(to top, #ad7b54, #d8a37a);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.btn-scroll .icon {
	margin-right: 4rpx;
	width: 26rpx;
	height: 26rpx;
	background-color: red;
}

.line {
	margin: 0 auto;
	width: 670rpx;
	height: 1rpx;
	background: var(--backgroundDivisionColor);
}

[data-tradition='newYear'],.newYear{
	.btn-group .btn-share {
		border-color: #F54435;
		background-color: #FFEEED;
		color: #F44334;
	}
	.btn-group .btn-linear {
		background: linear-gradient(360deg, #E7473A 0%, #FC6759 98%);
	}
	.btn-scroll .bwfont {
		background: none;
		-webkit-text-fill-color: #F05704;
		color: #F05704;
	}
	.btn-scroll .btn {
		border-color: rgba(211, 54, 41, 0.70);
	}
	
}

[data-tradition='newYear2'],.newYear2{
	.btn-group .btn-share {
		border-color: #ED7923;
		background-color: #FFF2E7;
		color: #E46921;
	}
	.btn-group .btn-linear {
		background: linear-gradient(360deg, #E57E46 0%, #E4AB5C 98%);
	}
	.btn-scroll .bwfont {
		background: none;
		-webkit-text-fill-color: #F05704;
		color: #F05704;
	}
	.btn-scroll .btn {
		border-color: rgba(237, 121, 35, 0.70);
	}
}
[data-tradition='golden'],.golden{
	.btn-group .btn-share {
		border-color: var(--senderViewColor);
		background-color:var(--pureButtonBackOneColor);
		color: var(--senderViewColor);
	}
	.btn-group .btn-linear {
		background: linear-gradient(180deg, var(--rampButtonBackStartColor) 0%, var(--rampButtonBackEndColor) 100%);
	}
	.btn-scroll .bwfont {
		background-image: linear-gradient(to top, #ad7b54, #d8a37a);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.btn-scroll .btn {
		border-color: var(--buttonOutlineTwoColor);
	}
	
}
[data-tradition='turquoise'],.turquoise{
	.btn-group .btn-share {
		border-color: #0a6f88;
		background-color: #dbf4f9;
		color: #0a6f88;
	}
	.btn-group .btn-linear {
		background: linear-gradient(360deg, #045570 0%, #1290a7 100%);
	}
	.btn-scroll .bwfont {
		background-image: linear-gradient(to top, #045872, #0e8299);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.btn-scroll .btn {
		border-color: #0a6f88;
	}
}
[data-tradition='fuchsia'],.fuchsia{
	.btn-group .btn-share {
		border-color: #bd2bc0;
		background-color: #fce2fc;
		color: #961a98;
	}
	.btn-group .btn-linear {
		background: linear-gradient(360deg, #840d86 0%, #cf33d1 100%);
	}
	.btn-scroll .bwfont {
		background-image: linear-gradient(to top, #770c78, #cf33d1);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.btn-scroll .btn {
		border-color: #bd2bc0;
	}
}

</style>
